<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams" :rules="modelRule">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="用户账号"
              v-model="queryPrams.userAccount"
              prop="userAccount"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseInput
              label="用户昵称"
              v-model="queryPrams.userName"
              prop="userName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="账号状态"
              v-model="queryPrams.userAccountStatus"
              :options="userMap"
              prop="userAccountStatus"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="账号权限"
              v-model="queryPrams.userAccountLimit"
              :options="userLimitMap"
              prop="userAccountLimit"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="用户职能"
              v-model="queryPrams.userFunc"
              :options="userFMap"
              prop="userFunc"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        :highlight-current-row="true"
        row-key="uid"
        @row-dblclick="handleOpen"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />

        <el-table-column prop="userAccount" align="center" label="账号" />

        <el-table-column
          prop="userName"
          align="center"
          label="用户昵称"
          width="120"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="userAccountLimit"
          align="center"
          label="账号权限"
          width="120"
        >
          <template #default="scope">
            <el-button
              :style="{
                color: userAccountLimitColorMap.get(scope.row.userAccountLimit),
              }"
              link
              >{{
                userAccountLimitMap.get(scope.row.userAccountLimit)
              }}</el-button
            >
          </template>
        </el-table-column>

        <el-table-column prop="userFunc" align="center" label="用户职能">
          <template #default="scope">
            <el-button
              :style="{ color: userFuncColorMap.get(scope.row.userFunc) }"
              link
              >{{ userFuncMap.get(scope.row.userFunc) }}</el-button
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="userSignDate"
          align="center"
          label="创建时间"
          width="170"
        >
          <template #default="scope">
            {{ formatDate(scope.row.userSignDate) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="userAccountStatus"
          align="center"
          label="账号状态"
        >
          <template #default="scope">
            <el-button
              :type="userAccountColorMap.get(scope.row.userAccountStatus)"
              link
              >{{ userAccountMap.get(scope.row.userAccountStatus) }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="right" fixed="right" width="200">
          <template #header>
            <span
              style="
                display: inline-block;
                border: 1px solid skyblue;
                padding: 2px 6px;
              "
              >双击行即可实现编辑哦</span
            >
          </template>
          <template #default="scope">
            <el-button size="small" type="danger" @click="deleteUser(scope.row)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :pageSourse="pageSourse"
        :pageSizes="[10, 20, 30, 50]"
        :queryPrams="queryPrams"
        :listUrl="pageUrl.list"
        layout="total, pager, jumper, sizes"
        @onSearch="getListData(pageUrl.list)"
      >
      </BasePagination>
    </div>
    <adminUserModal
      ref="adminUserModalRef"
      @refresh="getListData(pageUrl.list)"
    ></adminUserModal>
  </div>
</template>

<script setup lang="ts" name="admin-user">
import * as api from "@/api/index";
import { formatDate } from "@uilts/uilts-core";
import { SearchArea } from "@components/FormSearch/index";
import { BaseInput, BaseSelect } from "@components/BaseForm/index";
import type { FormRules, FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import adminUserModal from "./modules/admin-user-modal.vue";
import { ref, onMounted } from "vue";
import {
  userAccountLimitMap,
  userFuncMap,
  userAccountMap,
  userAccountColorMap,
  userAccountLimitColorMap,
  userFuncColorMap,
} from "../../../uilts/uilts-map";
interface adminUserModalRefType {
  handleShow: (val: boolean, item?: objectType<any>) => void;
}
// 弹窗实例
let adminUserModalRef = ref<adminUserModalRefType | null>(null);

let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm = ref<any>();
// 检索区元素
const searchBox: any = ref(null);

// 列表相关url
let pageUrl = {
  list: api.admin.URL_USERLIST,
};

let handleOpen = (a?: any, b?: any, c?: any) => {
  adminUserModalRef.value?.handleShow(true, a);
};

let userLimitMap = [
  [0, "普通用户"],
  [1, "管理员"],
  [2, "超级管理员"],
];
let userFMap = [
  [0, "用户"],
  [1, "前端开发"],
  [2, "后端开发"],
  [3, "全栈开发"],
];
let userMap = [
  [0, "正常"],
  [1, "冻结"],
  [2, "异常"],
  [3, "封停"],
  [4, "IP异常"],
];

let modelRule = ref<FormRules>({
  userName: [
    {
      trigger: "blur",
      validator: (rule: any, value: any, callback: any) => {
        console.log(value, queryPrams, "校验触发");
        value ? callback() : callback(new Error("必填项"));
      },
    },
  ],
});

// table渲染高度
let tableHeight = ref(600);
onMounted(() => {
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});

// 删除用户
function deleteUser(row: objectType<any>) {
  //
}
</script>

<style lang="less" scoped>
.container {
  .list {
    padding: 0px 24px;
    box-sizing: border-box;
  }
}
</style>
